<template>
<article>
    <sticky className="searchPB">
      <div class="search">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="mini" style="width:40%;max-width:300px;" v-model="keyword" @keydown.enter.native="getUserList(1)"></el-input>
          <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="getUserList(1)" v-waves>搜索</el-button>
          <el-button type="primary" :loading="loading" size="mini" @click="add" v-waves>添加管理员</el-button>
      </div>
    </sticky>
    <el-table ref="multipleTable" :data="userList" tooltip-effect="dark" style="margin-top: 10px;" stripe border>
        <el-table-column type="index" width="55" align="center" header-align="center" :index="increment"></el-table-column>

        <el-table-column show-overflow-tooltip
                         v-if="!item.hidden"
                         v-for="(item, index) in headerOptions"
                         :key="index" :label="item.label"
                         :prop="item.prop"
                         :header-align="item.headerAlign"
                         :align="item.align"
                         :min-width="item.width || 100">
            <template slot-scope="scope">
                <div v-if="scope.column.property === 'roles'">
                    <el-tag
                        class="tag"
                        type="primary"
                        close-transition
                        v-for="(tag, index) in scope.row.roles" :key="index">{{tag}}</el-tag>
                </div>
                <div v-else-if="scope.column.property === 'avatar'"><img :src="scope.row[scope.column.property]" alt="" style="height: 40px;"></div>
                <div v-else>{{scope.row[scope.column.property] || '无'}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="300">
            <template slot-scope="scope">
              <el-button size="mini" @click="reset(scope)">重置密码</el-button>
              <el-button size="mini" @click="edit(scope)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="size_scoped"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="userTotal">
    </el-pagination>
    <EditComponent v-if="editShow" :info="userInfo" @close="editClose"></EditComponent>
    <AddComponent v-if="addShow" :info="userInfo" @close="addClose"></AddComponent>
</article>
</template>
<script>
    import { mapGetters } from 'vuex'
    import EditComponent from '../edit/index'
    import AddComponent from '../add/index'
    import Sticky from 'base/Sticky'
    import md5 from 'js-md5'
    import { RESET_PWD } from 'common/utils/config.js'
    export default {
      components: {
        EditComponent,
        AddComponent,
        Sticky
      },
      data() {
        return {
          keyword: '',
          editShow: false,
          addShow: false,
          userInfo: {},
          loading: false,
          pageindex: 1,
          pagesize: 10,
          size_scoped: [10, 20, 30, 40],
          headerOptions: [
            {
              label: 'id',
              prop: '_id',
              hidden: true,
              headerAlign: 'center',
              align: 'center',
              width: ''
            },
            {
              label: '用户名',
              prop: 'username',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 100
            },
            {
              label: '姓名',
              prop: 'name',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 100
            },
            {
              label: '手机号',
              prop: 'username',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 100
            },
            {
              label: '网址',
              prop: 'roles',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: ''
            }
          ],
          multipleSelection: []
        }
      },
      mounted() {
        this.getUserList()
      },
      methods: {
        increment(index) {
          return index + 1 + ((this.pageindex - 1) * this.pagesize)
        },
        editClose() {
          this.editShow = false
          this.getUserList()
        },
        addClose() {
          this.addShow = false
          this.getUserList()
        },
        handleSizeChange(val) {
          this.pagesize = val
          this.getUserList(1)
        },
        handleCurrentChange(val) {
          this.pageindex = val
          this.getUserList()
        },
        async getUserList(index) {
          this.loading = true
          try {
            await this.$store.dispatch('GetUserList', {
              keyword: this.keyword,
              pageindex: index || this.pageindex,
              pagesize: this.pagesize
            })
            this.loading = false
          } catch (e) {
            this.loading = false
          }
        },
        del(scope) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(async() => {
            try {
              const message = await this.$store.dispatch('DelUser', scope.row._id)
              this.userList.splice(scope.$index, 1)
              this.$message({
                type: 'success',
                message: message.msg
              })
            } catch (e) {
              console.log(e)
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        edit(scope) {
          this.userInfo = scope.row
          this.editShow = true
        },
        add(scope) {
          this.addShow = true
        },
        reset(scope) {
          this.$confirm(`密码将重置为${RESET_PWD}, 是否继续?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(async() => {
            const info = {
              id: scope.row._id,
              pwd: md5(RESET_PWD),
              type: 'reset'
            }
            try {
              await this.$store.dispatch('UpdateUserMyself', info).then(() => {
                this.$message.success('重置成功')
              })
            } catch (err) {
              this.$message.error(err.message)
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      },
      computed: {
        ...mapGetters([
          'userList',
          'userTotal'
        ])
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
article {
  padding: 20px;
  background-color: #fff;
  .search {
    padding-bottom: 20px;
    text-align: right;
    background-color: rgba(255,255,255,.8);
    .el-input {
      width: 300px;
    }
  }
  .pagination {
    text-align: right;
    padding: 20px 0;
  }
  .tag {
    margin: 0 10px;
  }
}
</style>
